<template>
  <div class="echarts-view">
    <BaseChart :options="chartData" />
    <div class="datelist">
      <i class="el-icon-s-grid">数据列表</i>
    </div>
    <div class="routemain">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; line-height: 0px"
      >
        <!--
        序号
        商品名称
        销售额
        销量 
      -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="序号" width="120"> </el-table-column>
        <el-table-column prop="goodsname" label="商品名称" width="240">
        </el-table-column>
        <el-table-column prop="money" label="销售额"> </el-table-column>
        <el-table-column prop="num" label="销量"> </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
//Echarts组件封装引入
import BaseChart from "@/components/action/sales/Charts/BaseChart.vue";
//Axio引入
import axios from "axios";
export default {
  data() {
    return {
      //分页设置
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      //表格数据
      tableData: [],
      chartData: {}, //charts图表数据初始化
    };
  },
  created() {},
  methods: {
    //分页
    handleSizeChange(pageSize) {
      //console.log(`每页 ${val} 条`);
      this.pageSize=pageSize;
    },
    handleCurrentChange(currentPage) {
      //console.log(`当前页: ${val}`);
      this.currentPage=currentPage;
    },
  },
  components: {
    BaseChart,
  },
  mounted() {
    //接口数据传输
    axios({
      url: "https://www.fastmock.site/mock/209040d286c0365d882a2dfa80a278fc/manager/goods",
      method: "GET",
    })
      .then((res) => {
        this.tableData=res.data
        // console.log("获取的数据：", res.data);
        this.chartData = {
          legend: {},
          tooltip: {},
          xAxis: {
            type: "category",
          },
          yAxis: {},
          dataset: {
            dimensions: ["goodsname", "销售额", "销售量"],
            source: res.data,
          },
          series: [
            {
              type: "bar",
            },
            {
              type: "bar",
            },
          ],
        };

        setTimeout(() => {
          console.log("配置：", this.chartData);
        }, 100);
      })
      .catch((err) => {
        console.log("获取数据失败", err);
      });
  },
};
</script>

<style>
#baseEcharts {
  width: 800px;
  height: 600px;
}
</style>
